<!--时钟图标的弹窗组件-->
<template>
  <!--弹窗最外层的容器-->
  <div v-show="isShowModifyGroupName" id="modifyGroupName"
       style="
    width:100%;
    height: 100%;
    margin-top: 50px;
    background: rgba(255,255,255,0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    display: flex;">
    <!--弹窗的窗口，遮罩层-->
    <div class="modifyGroupName_content"
         style="
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    margin: auto;
    position: relative;">
      <!--弹窗头部-->
      <div class="modifyGroupName_title" style="
        padding: 5px;
        width: 100%;
        text-align:center;
        margin-top: 10%;">

        <div style="width: 80%;margin: 10px auto;border: #35495e solid 1px;padding: 20px 10px 20px 10px;border-radius: 10px">
          <div id="groupName">
            <div class="item">
              <span class="title">名称：</span>
              <span style="display: inline-block;width: 165px;font-size: medium;color: #2a6496;margin-left: 4px;padding: 3px 5px;text-align: left">{{ userInfo.detail.place}}</span>
            </div>
            <div class="item">
              <span class="title">学院：</span>
              <label>
                <input v-model="groupNameDividedList[1]" style="border:1px gray solid;" class="input_box"/>
              </label>
            </div>
            <div class="item">
              <span class="title">
                实验室/单位：
              </span>
              <label>
                <input v-model="groupNameDividedList[2]" style="border:1px gray solid;" class="input_box"/>
              </label>
            </div>
            <div class="item">
              <span class="title">
                群名：
              </span>
              <label>
                <input v-model="groupNameDividedList[3]" style="border:1px gray solid;" class="input_box"/>
              </label>
            </div>
          </div>
          <hr style="border: 0;background-color: #2a6496;height: 1.5px;width: 100%;margin-top: 30px">
          <div id="buttons">
            <button class="this_button" @click="cancel">
              取消
            </button>
            <button class="this_button" @click="modifyGroupName">
              修改
            </button>
          </div>
        </div>
        <!--插入提示框-->
        <div v-transfer-dom>
          <alert v-model="isShowAlert"> {{alertText}}</alert>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import {mapState} from 'Vuex'
  import {setTimeout} from 'timers'
  import group from 'api/group'

  export default {
    props: {
      isShowModifyGroupName: {type: Boolean},
      groupName: {type: String}
    },
    components: {
    },
    data () {
      return {
        groupNameDepartment: '',
        groupNameLab: '',
        groupNameSpecial: '',
        userName: '',
        alertText: '',
        isShowAlert: false,
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['groupNameDividedList', 'groupPresent'])
    },
    methods: {
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      cancel () {
        this.closeTip()
        this.$emit('update:isShowModifyGroupName', false)
      },
      async modifyGroupName () {
        let regIllegal = /[@#\$%\^&\*]+/
        let regEmpty = /^[ ]+$/
        this.groupNameDepartment = this.groupNameDividedList[1];
        this.groupNameLab = this.groupNameDividedList[2];
        this.groupNameSpecial = this.groupNameDividedList[3];
        if (!regEmpty.test(this.groupNameDepartment) && !regEmpty.test(this.groupNameLab)
          && !regEmpty.test(this.groupNameSpecial) && !regIllegal.test(this.groupNameDepartment)
          && !regIllegal.test(this.groupNameLab) && !regIllegal.test(this.groupNameSpecial)
          && !('' === this.groupNameDepartment) && !('' === this.groupNameLab) && !('' === this.groupNameSpecial)) {
          let modifiedGroupName = this.userInfo.detail.place + '-' +
            this.groupNameDepartment + '-' +
            this.groupNameLab + '-' +
            this.groupNameSpecial;
          this.$emit('update:groupName', modifiedGroupName);
          let groupModified = this.groupPresent;
          groupModified.detail.groupName = modifiedGroupName;
          this.$store.commit('recordGroupPresent', groupModified);
          console.log(groupModified)
          await group.postUpdateGroupInfo(groupModified)
          setTimeout(this.cancel, 300)
        } else {
          this.showAlert('群名不全或含非法字符')
          setTimeout(this.closeTip, 1400)
        }
      }
    },
  }
</script>
<style scoped>
  .input_box {
    padding: 3px 5px;
  }

  .input {
    font-size: medium;
  }

  .title {
    text-align: left;
    padding-left: 20px;
    color: grey;
    display: inline-block;
    width: 100px;
  }

  .item {
    margin-top: 10px;
  }

  .this_button {
    width: 120px;
    height: 35px;
    border: none;
    color: white;
    background: #35495e;
    text-align: center;
    outline: none;
    border-radius: 5px;
    margin: 20px auto;
  }
</style>
